Correspondance de Motifs en JavaScript avec les Expressions Régulières : Un Guide Complet

Les expressions régulières (regex) sont un outil puissant pour la correspondance de motifs et la manipulation de texte en JavaScript. Elles permettent aux développeurs de rechercher, valider et transformer des chaînes de caractères en fonction de motifs définis. Ce guide offre un aperçu complet des expressions régulières en JavaScript, couvrant la syntaxe, l'utilisation et les techniques avancées.

Que sont les Expressions Régulières ?

Une expression régulière est une séquence de caractères qui définit un motif de recherche. Ces motifs sont utilisés pour faire correspondre et manipuler des chaînes. Les expressions régulières sont largement utilisées en programmation pour des tâches telles que :

• Validation de Données : Assurer que les entrées utilisateur respectent des formats spécifiques (par ex., adresses e-mail, numéros de téléphone).
• Extraction de Données : Récupérer des informations spécifiques d'un texte (par ex., extraire des dates, des URL ou des prix).
• Recherche et Remplacement : Trouver et remplacer du texte en fonction de motifs complexes.
• Traitement de Texte : Diviser, joindre ou transformer des chaînes selon des règles définies.

Créer des Expressions Régulières en JavaScript

En JavaScript, les expressions régulières peuvent être créées de deux manières :

1. Utiliser un littéral d'expression régulière : Encadrer le motif par des barres obliques (/).
2. Utiliser le constructeur RegExp : Créer un objet RegExp avec le motif sous forme de chaîne de caractères.

Exemple :

// Utilisation d'un littéral d'expression régulière
const regexLiteral = /hello/;

// Utilisation du constructeur RegExp
const regexConstructor = new RegExp("hello");

Le choix entre les deux méthodes dépend si le motif est connu au moment de la compilation ou généré dynamiquement. Utilisez la notation littérale lorsque le motif est fixe et connu à l'avance. Utilisez le constructeur lorsque le motif doit être construit par programmation, notamment en incorporant des variables.

Syntaxe de Base des Regex

Les expressions régulières sont constituées de caractères qui représentent le motif à rechercher. Voici quelques composants fondamentaux des regex :

• Caractères littéraux : Correspondront aux caractères eux-mêmes (par ex., /a/ correspond au caractère 'a').
• Métacaractères : Ont des significations spéciales (par ex., ., ^, $, *, +, ?, [], {}, (), \, |).
• Classes de caractères : Représentent des ensembles de caractères (par ex., [abc] correspond à 'a', 'b', ou 'c').
• Quantificateurs : Spécifient combien de fois un caractère ou un groupe doit apparaître (par ex., *, +, ?, {n}, {n,}, {n,m}).
• Ancres : Correspondront à des positions dans la chaîne (par ex., ^ correspond au début, $ correspond à la fin).

Métacaractères Courants :

• . (point) : Correspond à n'importe quel caractère unique sauf le saut de ligne.
• ^ (caret) : Correspond au début de la chaîne.
• $ (dollar) : Correspond à la fin de la chaîne.
• * (astérisque) : Correspond à zéro ou plusieurs occurrences du caractère ou groupe précédent.
• + (plus) : Correspond à une ou plusieurs occurrences du caractère ou groupe précédent.
• ? (point d'interrogation) : Correspond à zéro ou une occurrence du caractère ou groupe précédent. Utilisé pour les caractères optionnels.
• [] (crochets) : Définit une classe de caractères, correspondant à n'importe quel caractère unique à l'intérieur des crochets.
• {} (accolades) : Spécifie le nombre d'occurrences à faire correspondre. {n} correspond exactement à n fois, {n,} correspond à n fois ou plus, {n,m} correspond entre n et m fois.
• () (parenthèses) : Regroupe des caractères et capture la sous-chaîne correspondante.
• \ (antislash) : Échappe les métacaractères, vous permettant de les faire correspondre littéralement.
• | (pipe) : Agit comme un opérateur "ou", correspondant à l'expression avant ou après lui.

Classes de Caractères :

• [abc] : Correspond à l'un des caractères a, b ou c.
• [^abc] : Correspond à tout caractère qui n'est *pas* a, b ou c.
• [a-z] : Correspond à n'importe quelle lettre minuscule de a à z.
• [A-Z] : Correspond à n'importe quelle lettre majuscule de A à Z.
• [0-9] : Correspond à n'importe quel chiffre de 0 à 9.
• [a-zA-Z0-9] : Correspond à n'importe quel caractère alphanumérique.
• \d : Correspond à n'importe quel chiffre (équivalent à [0-9]).
• \D : Correspond à n'importe quel caractère non-chiffre (équivalent à [^0-9]).
• \w : Correspond à n'importe quel caractère de mot (alphanumérique plus le tiret bas ; équivalent à [a-zA-Z0-9_]).
• \W : Correspond à n'importe quel caractère qui n'est pas un caractère de mot (équivalent à [^a-zA-Z0-9_]).
• \s : Correspond à n'importe quel caractère d'espacement (espace, tabulation, saut de ligne, etc.).
• \S : Correspond à n'importe quel caractère qui n'est pas un espace.

Quantificateurs :

• * : Correspond à l'élément précédent zéro ou plusieurs fois. Par exemple, a* correspond à "", "a", "aa", "aaa", etc.
• + : Correspond à l'élément précédent une ou plusieurs fois. Par exemple, a+ correspond à "a", "aa", "aaa", mais pas à "".
• ? : Correspond à l'élément précédent zéro ou une fois. Par exemple, a? correspond à "" ou "a".
• {n} : Correspond à l'élément précédent exactement *n* fois. Par exemple, a{3} correspond à "aaa".
• {n,} : Correspond à l'élément précédent *n* fois ou plus. Par exemple, a{2,} correspond à "aa", "aaa", "aaaa", etc.
• {n,m} : Correspond à l'élément précédent entre *n* et *m* fois (inclus). Par exemple, a{2,4} correspond à "aa", "aaa" ou "aaaa".

Ancres :

• ^ : Correspond au début de la chaîne. Par exemple, ^Hello correspond aux chaînes qui *commencent* par "Hello".
• $ : Correspond à la fin de la chaîne. Par exemple, World$ correspond aux chaînes qui *se terminent* par "World".
• \b : Correspond à une frontière de mot. C'est la position entre un caractère de mot (\w) et un caractère qui n'est pas un mot (\W) ou le début ou la fin de la chaîne. Par exemple, \bword\b correspond au mot entier "word".

Indicateurs (Flags) :

Les indicateurs de regex modifient le comportement des expressions régulières. Ils sont ajoutés à la fin du littéral de regex ou passés comme second argument au constructeur RegExp.

• g (global) : Trouve toutes les occurrences du motif, pas seulement la première.
• i (ignore case) : Effectue une recherche insensible à la casse.
• m (multiline) : Active le mode multiligne, où ^ et $ correspondent au début et à la fin de chaque ligne (séparée par \n).
• s (dotAll) : Permet au point (.) de correspondre également aux caractères de saut de ligne.
• u (unicode) : Active le support complet de l'Unicode.
• y (sticky) : Ne correspond qu'à partir de l'index indiqué par la propriété lastIndex de la regex.

Méthodes Regex en JavaScript

JavaScript fournit plusieurs méthodes pour travailler avec les expressions régulières :

• test() : Teste si une chaîne correspond au motif. Renvoie true ou false.
• exec() : Exécute une recherche pour une correspondance dans une chaîne. Renvoie un tableau contenant le texte correspondant et les groupes capturés, ou null si aucune correspondance n'est trouvée.
• match() : Renvoie un tableau contenant les résultats de la correspondance d'une chaîne avec une expression régulière. Se comporte différemment avec et sans l'indicateur g.
• search() : Teste une correspondance dans une chaîne. Renvoie l'index de la première correspondance, ou -1 si aucune n'est trouvée.
• replace() : Remplace les occurrences d'un motif par une chaîne de remplacement ou une fonction qui renvoie la chaîne de remplacement.
• split() : Divise une chaîne en un tableau de sous-chaînes en se basant sur une expression régulière.

Exemples d'Utilisation des Méthodes Regex :

// test()
const regex = /hello/;
const str = "hello world";
console.log(regex.test(str)); // Sortie : true

// exec()
const regex2 = /hello (\w+)/;
const str2 = "hello world";
const result = regex2.exec(str2);
console.log(result); // Sortie : ["hello world", "world", index: 0, input: "hello world", groups: undefined]

// match() avec l'indicateur 'g'
const regex3 = /\d+/g; // Trouve un ou plusieurs chiffres globalement
const str3 = "There are 123 apples and 456 oranges.";
const matches = str3.match(regex3);
console.log(matches); // Sortie : ["123", "456"]

// match() sans l'indicateur 'g'
const regex4 = /\d+/;
const str4 = "There are 123 apples and 456 oranges.";
const match = str4.match(regex4);
console.log(match); // Sortie : ["123", index: 11, input: "There are 123 apples and 456 oranges.", groups: undefined]

// search()
const regex5 = /world/;
const str5 = "hello world";
console.log(str5.search(regex5)); // Sortie : 6

// replace()
const regex6 = /world/;
const str6 = "hello world";
const newStr = str6.replace(regex6, "JavaScript");
console.log(newStr); // Sortie : hello JavaScript

// replace() avec une fonction
const regex7 = /(\d+)-(\d+)-(\d+)/;
const str7 = "Today's date is 2023-10-27";
const newStr2 = str7.replace(regex7, (match, year, month, day) => {
  return `${day}/${month}/${year}`;
});
console.log(newStr2); // Sortie : Today's date is 27/10/2023

// split()
const regex8 = /, /;
const str8 = "apple, banana, cherry";
const arr = str8.split(regex8);
console.log(arr); // Sortie : ["apple", "banana", "cherry"]

Techniques Regex Avancées

Groupes de Capture :

Les parenthèses () sont utilisées pour créer des groupes de capture dans les expressions régulières. Les groupes de capture vous permettent d'extraire des parties spécifiques du texte correspondant. Les méthodes exec() et match() renvoient un tableau où le premier élément est la correspondance complète, et les éléments suivants sont les groupes capturés.

const regex = /(\d{4})-(\d{2})-(\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match[0]); // Sortie : 2023-10-27 (La correspondance complète)
console.log(match[1]); // Sortie : 2023 (Le premier groupe capturé - l'année)
console.log(match[2]); // Sortie : 10 (Le deuxième groupe capturé - le mois)
console.log(match[3]); // Sortie : 27 (Le troisième groupe capturé - le jour)

Groupes de Capture Nommés :

ES2018 a introduit les groupes de capture nommés, qui vous permettent d'attribuer des noms aux groupes de capture en utilisant la syntaxe (?...). Cela rend le code plus lisible et plus facile à maintenir.

const regex = /(?\d{4})-(?\d{2})-(?\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match.groups.year);  // Sortie : 2023
console.log(match.groups.month); // Sortie : 10
console.log(match.groups.day);   // Sortie : 27

Groupes sans Capture :

Si vous avez besoin de regrouper des parties d'une regex sans les capturer (par exemple, pour appliquer un quantificateur à un groupe), vous pouvez utiliser un groupe sans capture avec la syntaxe (?:...). Cela évite une allocation de mémoire inutile pour les groupes capturés.

const regex = /(?:https?:\/\/)?([\w\.]+)/; // Correspond à une URL mais ne capture que le nom de domaine
const url = "https://www.example.com/path";
const match = regex.exec(url);

console.log(match[1]); // Sortie : www.example.com

Lookarounds (Assertions) :

Les lookarounds sont des assertions de largeur nulle qui correspondent à une position dans une chaîne basée sur un motif qui précède (lookbehind) ou suit (lookahead) cette position, sans inclure le motif du lookaround dans la correspondance elle-même.

• Lookahead Positif : (?=...) Correspond si le motif à l'intérieur du lookahead *suit* la position actuelle.
• Lookahead Négatif : (?!...) Correspond si le motif à l'intérieur du lookahead ne *suit pas* la position actuelle.
• Lookbehind Positif : (?<=...) Correspond si le motif à l'intérieur du lookbehind *précède* la position actuelle.
• Lookbehind Négatif : (? Correspond si le motif à l'intérieur du lookbehind ne *précède pas* la position actuelle.

// Lookahead Positif : Obtenir le prix uniquement lorsqu'il est suivi de USD
const regex = /\d+(?= USD)/;
const text = "The price is 100 USD";
const match = text.match(regex);
console.log(match); // Sortie : ["100"]

// Lookahead Négatif : Obtenir le mot uniquement lorsqu'il n'est pas suivi d'un nombre
const regex2 = /\b\w+\b(?! \d)/;
const text2 = "apple 123 banana orange 456";
const matches = text2.match(regex2);
console.log(matches); // Sortie : null car match() ne retourne que la première correspondance sans l'indicateur 'g', ce qui n'est pas ce que nous voulons.
// pour corriger cela :
const regex3 = /\b\w+\b(?! \d)/g;
const text3 = "apple 123 banana orange 456";
const matches3 = text3.match(regex3);
console.log(matches3); // Sortie : [ 'banana' ]

// Lookbehind Positif : Obtenir la valeur uniquement lorsqu'elle est précédée de $
const regex4 = /(?<=\$)\d+/;
const text4 = "The price is $200";
const match4 = text4.match(regex4);
console.log(match4); // Sortie : ["200"]

// Lookbehind Négatif : Obtenir le mot uniquement s'il n'est pas précédé du mot 'not'
const regex5 = /(?

const regex = /([a-z]+) \1/;
const text = "hello hello world";
const match = regex.exec(text);
console.log(match); // Sortie : ["hello hello", "hello", index: 0, input: "hello hello world", groups: undefined]

const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

console.log(emailRegex.test("test@example.com"));    // Sortie : true
console.log(emailRegex.test("invalid-email"));       // Sortie : false
console.log(emailRegex.test("test@sub.example.co.uk")); // Sortie : true

const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
const text = "Visit our website at https://www.example.com or check out http://blog.example.org.";
const urls = text.match(urlRegex);
console.log(urls); // Sortie : ["https://www.example.com", "http://blog.example.org"]

const csvString = 'John,Doe,"123, Main St",New York';
const csvRegex = /(?:"([^"]*(?:""[^"]*)*)")|([^,]+)/g; //Regex CSV corrigée
let values = [];
let match;  

while (match = csvRegex.exec(csvString)) {
  values.push(match[1] ? match[1].replace(/""/g, '"') : match[2]);
}


console.log(values); // Sortie : ["John", "Doe", "123, Main St", "New York"]

const phoneRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
console.log(phoneRegex.test("+1 555 123 4567")); // Sortie : true (Exemple US)
console.log(phoneRegex.test("+44 20 7946 0500")); // Sortie : true (Exemple UK)
console.log(phoneRegex.test("+81 3 3224 5000"));  // Sortie : true (Exemple Japon)
console.log(phoneRegex.test("123-456-7890"));   // Sortie : false

const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

console.log(passwordRegex.test("P@ssword123")); // Sortie : true
console.log(passwordRegex.test("password"));       // Sortie : false (pas de majuscule ni de chiffre)
console.log(passwordRegex.test("Password"));       // Sortie : false (pas de chiffre)
console.log(passwordRegex.test("Pass123"));        // Sortie : false (pas de minuscule)
console.log(passwordRegex.test("P@ss1"));          // Sortie : false (moins de 8 caractères)